<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- echarts的容器，高度是必写的, 宽度可选 -->
    <div id="main" style="height: 400px"></div>

    <script src="../libs/echarts-5.3.3.js"></script>
    <script src="./geojson/china_json.js"></script>
    <script>
      window.onload = function () {
        echarts.registerMap('中国', { geoJSON: china_json })
        var data = [
          { name: '北京', value: 199 },
          { name: '天津', value: 42 },
          { name: '河北', value: 102 },
          { name: '山西', value: 81 },
          { name: '内蒙古', value: 47 },
          { name: '辽宁', value: 67 },
          { name: '吉林', value: 82 },
          { name: '黑龙江', value: 123 },
          { name: '上海', value: 24 },
          { name: '江苏', value: 92 },
          { name: '浙江', value: 114 },
          { name: '安徽', value: 109 },
          { name: '福建', value: 116 },
          { name: '江西', value: 91 },
          { name: '山东', value: 119 },
          { name: '河南', value: 137 },
          { name: '湖北', value: 116 },
          { name: '湖南', value: 114 },
          { name: '重庆', value: 91 },
          { name: '四川', value: 125 },
          { name: '贵州', value: 62 },
          { name: '云南', value: 83 },
          { name: '西藏', value: 9 },
          { name: '陕西', value: 80 },
          { name: '甘肃', value: 56 },
          { name: '青海', value: 10 },
          { name: '宁夏', value: 18 },
          { name: '新疆', value: 180 },
          { name: '广东', value: 123 },
          { name: '广西', value: 59 },
          { name: '海南', value: 14 },
        ]

        var myChart = echarts.init(document.getElementById('main'))

        var option = {
          geo: {
            map: '中国',
          },
          tooltip: {},
          series: [
            {
              name: '散点图',
              type: 'effectScatter',
              geoIndex: 0, // geo 支持数组，默认是 0
              coordinateSystem: 'geo', // 使用地理坐标系，通过 geoIndex 指定相应的地理坐标系组件。
              data: [
                {
                  name: '广东',
                  value: [113.280637, 23.125178, 193],
                },
                {
                  name: '北京',
                  value: [116.405285, 39.904989, 199],
                },
              ],
              // ====== 散点大小和着色========
              symbolSize: function (val) {
                return val[2] / 10
              },
              itemStyle: {
                color: 'yellow',
                shadowBlur: 10,
                shadowColor: 'yellow',
              },
              // ====== 散点大小和着色========
            },
          ],
        }

        myChart.setOption(option)
      }
    </script>
  </body>
</html>
